<template>
	<div class="wrapper">
		<swiper :options="swiperOption">
			<swiper-slide v-for="(slide,index) in swiperSlides" :key="index">
				<!-- 1、绑定图片元素 -->
				<img v-bind:src="slide.imageUrl" alt="">
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>
   
<script>
export default {
	data() {
		return {
			swiperSlides: [],
			swiperOption: {
				autoplay: false,
				autoplayDisableOnInteraction: false,   // 用户操作swiper之后，是否禁止autoplay
				pagination: '.swiper-pagination',/*控制进度分页*/
				loop: true,/*无缝循环*/
				paginationType: 'bullets',/**分页器样式类型 */
				observeParents: true,
				observer: true,
				initialSlide: 0,/**初始化显示图片 */
			}
		}
	},
	mounted() {
		this.$axios.get('/music/banner', {       // 还可以直接把参数拼接在url后边
			params: {
				// title:'眼镜'
			}
		}).then((res) => {
			console.log(res)
			this.swiperSlides = res.data.banners;
		}).catch((error) => {
			console.log(error);
		});
	},
}
</script>
   
<style scoped>
.wrapper,
.wrapper .swiper-container,
.wrapper img {
	height: 220px;
}
.wrapper img {
	height: 100%;
	width: 100%;
	display: block;
}
</style>